<template>
  <Fragment class="bod">
    <h1>的的</h1>
    <h1>订单</h1>
    <div class="list">
      <!-- Teleport 提供了一种干净的方法, 让组件的html在父组件界面外的特定标签(很可能是body)下插入显示 -->
      <!--  -->
      <teleport to="#con">
        <div class="cover">
          <div class="sync">
            <Suspense>
              <sus-com></sus-com>
            </Suspense>
          </div>
        </div>
      </teleport>
      <!-- vue3 v-model的修饰符
      可以完成快速的父传子和子传父  -->
      <h1>{{ title }}</h1>
      <vmodel-com v-model:title="title"></vmodel-com>
    </div>
  </Fragment>
</template>
<script lang="ts">
import susCom from './sus.vue'
import vmodelCom from './vmodelCom.vue'
import { ref } from 'vue'
export default {
  setup () {
    let title = ref<string>('星期一')

    return {
      title
    }
  },
  components: {
    susCom,
    vmodelCom
  }
}
</script>
<style lang="less">
.cover {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
}
.bod {
}
</style>
